<template>
	<!-- 商品类目 -->
	<div id="tops">
		<div class="Box">
			<div class="filter-container">
				<div class="filter-item" :model="formInline">
					<el-input v-model="formInline.id" placeholder="请输入类目ID" clearable></el-input>
					<el-input v-model="formInline.title" placeholder="请输入类目名称" clearable></el-input>
					<el-select v-model="formInline.level" placeholder="请选择类目级别" clearable>
						<el-option label="一级类目" :value="0"></el-option>
						<el-option label="二级类目" :value="1"></el-option>
						<el-option label="三级类目" :value="2"></el-option>
					</el-select>
					<el-cascader v-model="formInline.parentId" :options="options" placeholder="选择父类目、默认一级类目" :props="{ checkStrictly: true }" clearable>
					</el-cascader>
				</div>
				<div>
					<el-button type="primary" @click="liste" icon="el-icon-search" v-insert="['operation:category:query']">查找</el-button>
					<el-button type="primary" @click="upad()" icon="el-icon-edit" v-insert="['operation:category:create']">添加</el-button>
				</div>
				<!-- 弹窗 -->
				<el-dialog :title="title" status-icon :visible.sync="dialogFormVisible" class="on" v-if="dialogFormVisible">
					<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
						<el-form-item label="类目名称" :label-width="formLabelWidth" prop="title">
							<el-input v-model="ruleForm.title" autocomplete="off" width="50px"></el-input>
						</el-form-item>
						<el-form-item label="类目图片" prop="picUrl" :label-width="formLabelWidth">
							<el-upload class="avatar-uploader" action="http://192.168.1.54:8081/upload/admin" :show-file-list="false"
							 :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
								<img v-if="ruleForm.picUrl" :src="ruleForm.picUrl" class="avatar" />
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
						<el-form-item label="父类目" :label-width="formLabelWidth" prop="parentId">
							<el-cascader v-model="ruleForm.parentId" :options="options" placeholder="选择父类目、默认一级类目" :props="{ checkStrictly: true }"
							 clearable>
							</el-cascader>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="demil('ruleForm')">确 定</el-button>
					</div>
				</el-dialog>
			</div>
			<div>
				<el-main class="Main">
					<el-table :data="tableData" border style="width: 100%" empty-text="暂无数据" size="mini" v-loading="loading"
					 element-loading-text="正在查询中。。。">
						<el-table-column prop="value" label="类目ID " align="center" sortable>
						</el-table-column>
						<el-table-column prop="label" label="类目名" align="center">
							<template slot-scope="scope">
								<el-tag type="primary" plain>{{scope.row.label}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="fullName" label="全类目名 " align="center" sortable>
							<template slot-scope="scope">
								<el-tag type="primary" plain>{{scope.row.fullName}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="parent" label="父类目ID" align="center">
						</el-table-column>
						<el-table-column prop="level" label="级别" align="center">
							<template slot-scope="scope">
								<el-tag type="primary" plain>{{
					  scope.row.level == 0 ? "一级类目" :  scope.row.level == 1?"二级类目":'三级类目'
					}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="imgUrl" label="标志图片" align="center">
						</el-table-column>
						<el-table-column prop="picUrl" label="类目图片" align="center">
							<template slot-scope="scope">
								<img :src="scope.row.picUrl">
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center">
							<template slot-scope="scope">
								<el-button type="primary" @click="upad(scope.row)" size="mini" v-insert="['operation:category:update']">编辑</el-button>
								<el-button type="danger" @click="del(scope.row)" size="mini" v-insert="['operation:category:delete']">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-main>
			</div>
			<el-container>
				<el-header class="buttom">
					<div class="block1">
						<!-- <span class="demonstration"></span> -->
						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"
						 :page-size="count" :total="totalCount" :page-sizes="[10, 20, 30, 40, 50, 100]">
						</el-pagination>
					</div>
				</el-header>
			</el-container>
		</div>
	</div>
</template>

<script>
	import {
		Goodlist,
		Goodaddupdate,
		GoodSpu,
		Gooddel
	} from '../../api/goodscategory.js'
	export default {
		data() {
			var checkAge = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('类目名不能为空'))
				} else {
					callback()
				}
			}
			return {
				input: '',
				tableData: [],
				loading: true,
				count: 20,
				totalCount: 1,
				dialogFormVisible: false,
				title: '',
				pageNo: 1,
				options: [],
				value: '',
				formLabelWidth: '120px',
				formInline: {
					id: null,
					title: null,
					level: null,
					parentId: []
				},
				ruleForm: {
					title: '',
					picUrl: '',
					parentId: ''
				},
				rules: {
					title: [{
						required: true,
						validator: checkAge,
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			// 删除
			del(row) {
				this.$confirm(`此操作将永久删除该用户---'${row.label}'---是否继续?', '提示`, {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						Gooddel(row.value).then((res) => {
							if (res.data.errmsg == '成功') {
								this.liste()
								this.$message({
									type: 'success',
									message: '删除成功'
								})
							} else {
								this.$message.error({
									type: 'info',
									message: res.data.errmsg
								})
							}
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
			},
			// spu树
			list() {
				GoodSpu().then((res) => {
					// console.log(res)
					this.options = this.renderTreeNodes(res.data.data)
				})
			},
			//数据处理  选择父类目、默认一级类目
			renderTreeNodes(datas) {
				const data = []
				datas.map((item) => {
					if (item.children.length > 0) {
						const dadax = {
							id: item.value,
							label: item.label,
							value: item.value,
							children: this.renderTreeNodes(item.children)
						}
						data.push(dadax)
					} else {
						const dadax = {
							id: item.id,
							label: item.label,
							value: item.value
						}
						data.push(dadax)
					}
					return data
				})
				return data
			},
			//  弹出框
			upad(row) {
				console.log(row)
				this.dialogFormVisible = true
				if (!row) {
					this.title = '创建'
					this.ruleForm.title = ''
					this.ruleForm.picUrl = ''
					this.ruleForm.parentId = ''
				} else {
					this.title = '编辑'
					this.ruleForm.title = row.label
					this.ruleForm.picUrl = row.picUrl
					this.ruleForm.parentId = [row.parent]
					// console.log(typeof(row.parent))
					this.ruleForm.id = row.value
				}
			},
			// 确定添加修改
			demil(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						const params = {
							_mt: this.title == '创建' ? 'addCategory' : 'updateCategory',
							title: this.ruleForm.title,
							picUrl: this.ruleForm.picUrl,
							parentId: this.ruleForm.parentId.length == 0 ? 0 : this.ruleForm.parentId[this.ruleForm.parentId.length -1],
							id: this.ruleForm.id
						}
						Goodaddupdate(params).then((res) => {
							console.log(res)
							if (res.data.errmsg == '成功') {
								this.dialogFormVisible = false
								this.liste()
								this.$message({
									type: 'success',
									message: this.title == '编辑' ? '更新用户成功' : '添加用户成功'
								})
							} else {
								this.$message.error(res.data.errmsg)
							}
						})
					} else {
						return false
					}
				})
			},
			handleAvatarSuccess(res, file) {
				this.ruleForm.picUrl = res.url
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg'
				const isLt2M = file.size / 1024 / 1024 < 2
				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!')
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!')
				}
				return isJPG && isLt2M
			},
			liste() {
				const data = {
					pageNo: this.pageNo,
					limit: this.count,
					parentId: this.formInline.parentId[this.formInline.parentId.length - 1],
					title: this.formInline.title,
					level: this.formInline.level,
					id: this.formInline.id
				}
				console.log(data)
				Goodlist(data).then((response) => {
					console.log(response)
					if (response.data.errmsg == '成功') {
						this.loading = false
						this.tableData = response.data.data.items
						this.totalCount = response.data.data.total
						this.count = response.data.data.pageSize
					} else {
						setTimeout(() => {
							this.loading = false
						}, 5000)
					}
				})
			},
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`)
				this.count = val
				this.liste()
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`)
				this.pageNo = val
				this.liste()
			}
		},
		created() {
			this.liste()
			this.list()
		}
	}
</script>

<style scoped="scoped" lang="less">
	// 头部
	#tops {
		width: 100%;
		overflow: hidden;
		// background-color: pink;
	}

	// 头部
	.Box {
		width: 100%;
		overflow: hidden;
		// height: 900px;
	}

	/* 中间 */
	.el-main {
		// background-color: #E9EEF3;
		color: #333;
		text-align: center;
		width: 100%;
		overflow: hidden;
		overflow-x: auto;
	}

	// 底部
	.buttom {
		// background-color: #B3C0D1;
		color: #333;
		// text-align: center;
		width: 100%;
		height: 130px !important;
	}

	.filter-container {
		width: 100%;
		height: 54px;
		line-height: 60px;
	}

	img {
		width: 80px;
	}

	.filter-item {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 10px;
		margin-right: 4px;
		float: left;
		margin-left: 20px;
	}

	.el-input {
		width: 200px !important;
		padding-left: 4px !important;
	}

	.el-select {
		margin: 0px 10px;
	}

	.on .el-input {
		width: 300px !important;
	}

	.el-table--border,
	.el-table--group {
		font-size: 10px !important;
	}

	.el-pagination {
		padding: 24px 10px !important;
	}

	/* 头像上传 */
	.avatar-uploader .el-upload {

		position: relative;
		overflow: hidden;
	}

	.avatar-uploader-icon:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px;
		text-align: center;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
	}

	.avatar {
		width: 120px;
		height: 120px;
		display: block;
	}
</style>
